﻿@{
    ViewBag.Title = "Home Page";
}

<div id="map" style="height: 77%;"></div>

<script type="text/javascript">

    {
        var url1 = 'http://localhost:8844/1492776782/{z}/{x}/{y}';
        var glayer1 = new L.TileLayer(url1, { maxZoom: 18, attribution: 'GreatMaps - OpenStreetMap' });

        var url2 = 'http://localhost:8844/1404362775/{z}/{x}/{y}';
        var glayer2 = new L.TileLayer(url2, { maxZoom: 18, attribution: 'GreatMaps - OpenCycleMap' });

        var url3 = 'http://localhost:8844/729174836/{z}/{x}/{y}';
        var glayer3 = new L.TileLayer(url3, { maxZoom: 18, attribution: 'GreatMaps - YahooMap' });

        var url4 = 'http://localhost:8844/2144088369/{z}/{x}/{y}';
        var glayer4 = new L.TileLayer(url4, { maxZoom: 18, attribution: 'GreatMaps - Bing' });

        var latlng = new L.LatLng(54.6961334816182, 25.2985095977783);

        var map = new L.Map('map', { center: latlng, zoom: 13, layers: [glayer1] });

        var baseLayers =
        {
            "OpenStreetMap": glayer1,
            "OpenCycleMap": glayer2,
            "YahooMap": glayer3,
            "Bing": glayer4
        };

        L.control.layers(baseLayers).addTo(map);

        var marker = new L.Marker(latlng);
        map.addLayer(marker);
        marker.bindPopup("<p>GMap.NET fusion power! ;}</p>").openPopup();

        L.control.locate({
            position: 'topleft', // set the location of the control
            drawCircle: false, // controls whether a circle is drawn that shows the uncertainty about the location
            follow: false, // follow the location if `watch` and `setView` are set to true in locateOptions
            circleStyle: {}, // change the style of the circle around the user's location
            markerStyle: {},
            metric: true, // use metric or imperial units
            onLocationError: function(err) { alert(err.message) }, // define an error callback function
            title: "Show me where I am", // title of the locat control
            popupText: ["You are within ", " from this point"], // text to appear if user clicks on circle
            setView: true, // automatically sets the map view to the user's location
            locateOptions: {} // define location options e.g enableHighAccuracy: true
        }).addTo(map);
    }

</script>